<template>
  <div class="boxStyle">
    <div
      class="productItem flex_cc"
      v-for="(item, index) in detail"
      :key="index"
    >
      <van-image
        width="145rem"
        height="225rem"
				fit="cover"
        :src="item.postUrlForShare"
      />
      <!-- <img :src="item.postUrlForShare" alt="" /> -->
      <div class="name">{{ item.name }}</div>
      <div class="discount">{{ item.discountTag }}</div>
      <div class="score" v-if="item.score !== '0.0'">{{ item.score }}分</div>
      <div class="score" v-else></div>
      <div class="showtime">{{ item.showTimeRange }}</div>
      <div class="priceRange">{{ item.priceRange.split("-")[0] }}元起</div>
    </div>
  </div>

  <!-- <ul>
      <li v-for="(item,index) in detail" :key="index">
          <img :src="item.postUrlForShare" alt="">
      </li>
    </ul> -->
</template>

<script setup>
import axios from "@/api/axios.js";
import { ref } from "vue";

const myData = localStorage.getItem("cityId") || "default value";
// console.log(myData);
const cityName = localStorage.getItem("cityName") || "default value";
// console.log(cityName);

const getDetail = () =>
  axios.get(
    `https://show.maoyan.com/maoyansh/myshow/ajax/recommend/performances?pageNo=1&pageSize=20&pageSource=1&uuid=&source=1&sellChannel=13&cityId=1&lng=0&lat=0&token=AgHaIrghJqn-MsPW5Vnf0CtRWHXgfuW6sKzewZ58cbrriFNRPidlin-ZOjsUZ6CPUav8gYLtNM9naAAAAAC9FgAA5KkHcETOwj2Ybd_pdsG1QpHWJAN-_qM4YNqcDEnGqFAE-f1VmwQbqnG1BKZbkC6s`,
    {}
  );
const detail = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data.data;
  // console.log("tuijiandetail", detail);
  // return detail;
}
update();
</script>

<style lang="scss" scoped>
.productItem {
  break-inside: avoid;
  width: 168rem;
  background: #ffffff;
  border-radius: 4rem;
  margin-bottom: 12rem;
  padding: 12rem 10rem;
}
.productImg {
  border-radius: 4rem 4rem 0rem 0rem;
  margin-bottom: 12rem;
}
.flex_cc {
  width: 168rem;
  border: 1rem solid red;
  display: flex;
  flex-direction: column;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.boxStyle {
  column-count: 2; // 每行展示的列数
  column-gap: 13rem; // 列之间的距离
}
</style>
